import React from 'react';
import './CardPanel.less';
import { Help } from '@icon-park/react';
import { Tooltip } from 'tdesign-react';

export interface ItemPanelProps {
  label: string;
  tip?: string;
  children: React.ReactNode;
  contentStyle?: React.CSSProperties;
}

export const CardPanel: React.FC<ItemPanelProps> = (props) => {
  const { label, tip, contentStyle, children } = props;
  return (
    <div className={'card-panel'}>
      <div className={'card-panel-label'}>
        {label}{' '}
        {tip && (
          <Tooltip overlayClassName={'card-help'} content={tip}>
            &nbsp;
            <Help />
            &nbsp;
          </Tooltip>
        )}
      </div>
      <div style={{ ...contentStyle }} className={'card-panel-content'}>
        {children}
      </div>
    </div>
  );
};
